<template>
  <!--需求资源-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="4">
        <el-button type="primary" @click="tags">需求标签</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="20">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="">
            <el-date-picker
              v-model="queryForm.date"
              type="daterange"
              value-format="yyyy-M-d"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="seleDate()"
              style="width:250px;"
            />
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model.trim="queryForm.keyword"
              style="width:180px;"
              placeholder="请输入姓名或手机号"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="queryForm.where_label_id"
              clearable
              placeholder="请选择一级标签"
              @change="seleTag(queryForm.where_label_id)"
              style="width:180px;margin-right: 10px"
            >
              <el-option
                v-for="item in labels"
                :key="item.id"
                :label="item.label_name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-model="queryForm.where_base_label_id"
              clearable
              placeholder="请选择二级标签"
              style="width:180px;"
            >
              <el-option
                v-for="item in labelsTwo"
                :key="item.id"
                :label="item.label_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="发布时间"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="appid_info.nickname"
        label="发布昵称"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="appid_info.mobile"
        label="发布手机号"
      />
      <el-table-column align="center" show-overflow-tooltip label="用户头像">
        <template #default="{ row }">
          <el-image
            style="width: 60px; height: 60px"
            :src="row.appid_info.logo"
            :preview-src-list="[row.appid_info.logo]"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="detail(row)">详情</el-button>
          <el-button type="text" @click="recommend(row)">
            {{ row.recommend_is == 1 ? '取消推荐' : '设为推荐' }}
          </el-button>
          <el-button type="text" @click="delList(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看 -->
    <el-dialog title="详情" :visible.sync="dialogDetail">
      <div class="detail-cont" :model="details">
        <div class="list">
          发布用户:
          <span>{{ userfor.nickname }}</span>
        </div>
        <div class="list">
          发布手机号:
          <span>{{ userfor.mobile }}</span>
        </div>
        <div class="list">
          发布城市:
          <span>{{ details.city_data }}</span>
        </div>
        <div class="list">
          发布时间:
          <span>{{ details.create_time }}</span>
        </div>
        <div class="list">
          标签:
          <span v-for="(item, index) in details.label" :key="index">
            {{ item.label_name_data }}
          </span>
        </div>
        <div class="list">
          是否推荐:
          <span>{{ details.recommend_is == 1 ? '是' : '否' }}</span>
        </div>
        <div class="list">
          需求开始时间:
          <span>{{ details.start_time }}</span>
        </div>
        <div class="list">
          需求结束时间:
          <span>{{ details.end_time }}</span>
        </div>
        <div class="list">
          需求说明:
          <span>{{ details.content }}</span>
        </div>
      </div>
    </el-dialog>

    <!-- 标签 -->
    <el-dialog title="需求标签" :visible.sync="dialogFormVisible">
      <el-button type="primary" @click="addOnetag()">添加标签</el-button>
      <el-table
        v-loading="listLoading"
        :data="labels"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="label_name"
          label="标签名称"
        />
        <!-- <el-table-column align="center" show-overflow-tooltip label="标签图片">
          <template #default="{ row }">
            <el-image
              style="width: 60px; height: 60px"
              :src="row.url"
              :preview-src-list="[row.url]"
            />
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editOnetag(scope)">编辑</el-button>
            <el-button type="text" @click="tagTwo(scope.row)">
              二级标签
            </el-button>
            <el-button type="text" @click="delOnetag(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.page"
        :page-size="queryForm.list_row"
        :layout="layout"
        :total="totalOnetag"
        @size-change="winSizeChange"
        @current-change="winCurrentChange"
      />
    </el-dialog>
    <!-- 操作一级标签 -->
    <el-dialog :title="onetag" :visible.sync="dialogOnetag">
      <el-form :model="form">
        <el-form-item label="标签名称:">
          <el-input v-model="onetagName" clearable />
        </el-form-item>
        <el-form-item v-show="addtype" label="上传图片:">
          <el-upload
            class="uploads"
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOnetag = false">取 消</el-button>
        <el-button v-show="addtype" type="primary" @click="addtag()">
          确 定
        </el-button>
        <el-button v-show="edittype" type="primary" @click="editTag()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 二级标签 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormTwo">
      <el-button type="primary" @click="twotags()">添加二级标签</el-button>
      <el-table
        v-loading="listLoading"
        :data="labelsTwo"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="label_name"
          label="标签名称"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editTwotag(scope)">编辑</el-button>
            <el-button type="text" @click="delTwotag(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.page"
        :page-size="queryForm.list_row"
        :layout="layout"
        :total="totalTwotag"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
    <!-- 操作二级标签 -->
    <el-dialog :title="twotag" :visible.sync="dialogTwotag">
      <el-input v-model="twotagName" clearable />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTwotag = false">取 消</el-button>
        <el-button v-show="addtype" type="primary" @click="addTwotag()">
          确 定
        </el-button>
        <el-button v-show="edittype" type="primary" @click="saveTwotag()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {
    getResourceLists,
    getLabelBaseLists,
    delResources,
    getResourceDatas,
    editResourceDatas,
    getOssUploadsParam,
    addLabelBases,
    delLabelBases,
    editBaseLabels,
    getLabelLists,
    addLabels,
    delLabels,
    editLabels,
  } from '@/api/common'
  import axios from 'axios'

  export default {
    name: 'Demand',
    data() {
      return {
        user: [],
        queryForm: {
          page: 1,
          list_row: 10,
          date: '',
          keyword: '',
          selectedOptions: '',
        },
        form: {
          content: '',
        },
        disabled: false,
        listLoading: false,
        list: [],
        labels: [],
        labelsTwo: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        totalOnetag: '',
        totalTwotag: 0,
        details: '',
        userfor: '',
        dialogDetail: false,
        dialogFormVisible: false,
        onetag: '',
        onetagName: '',
        twotagName: '',
        dialogOnetag: false,
        dialogTwotag: false,
        dialogFormTwo: false,
        img: '',
        onetagId: '',
        addtype: false,
        edittype: false,
        date: '',
        twotag:'',
        wintit:'',
      }
    },
    created() {
      this.getData()
      let params = {
        page: this.queryForm.page,
        limit: this.queryForm.list_row,
        type: 2,
      }
      getLabelBaseLists(params).then((data) => {
        this.labels = data.data
        this.totalOnetag = data.count
      })
    },
    methods: {
      handleRemove(){},
      handlePictureCardPreview(){},
      handleDetail() {},
      //搜索
      search() {
        this.getData()
      },
      restart() {
        this.queryForm = []
				this.date = ''
        this.getData()
      },
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          where_time: this.date,
          type: 1,
          where_input: this.queryForm.keyword,
          where_base_label_id: this.queryForm.where_label_id,
          where_label_id: this.queryForm.where_base_label_id,
        }
        getResourceLists(params).then((data) => {
          this.list = data.data
          this.total = data.count
        })
      },
      seleDate() {
        this.date = this.queryForm.date[0] + ' ' + '-' + ' ' + this.queryForm.date[1]
      },
      seleTag(val) {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          type: 2,
          label_base_id: val,
        }
        getLabelLists(params).then((data) => {
          this.labelsTwo = data.data
          this.totalTwotag = data.count
        })
      },
      setSelectRows() {},
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      winSizeChange(val) {
        this.queryForm.list_row = val
        this.tags()
      },
      winCurrentChange(val) {
        this.queryForm.page = val
        this.tags()
      },
      selectType(e) {
        this.queryForm.types === e.value
      },
      detail(row) {
        this.dialogDetail = true
        let params = {
          id: row.id,
        }
        getResourceDatas(params).then((data) => {
          this.details = data.data
          this.userfor = data.data.appid_info
        })
      },
      recommend(row) {
        let num = ''
        if (row.recommend_is == 1) {
          num = 2
        } else {
          num = 1
        }
        let params = {
          id: row.id,
          recommend_is: num,
        }
        editResourceDatas(params).then((data) => {
          this.$message.success('操作成功！')
          this.getData()
        })
      },
      delList(row) {
        let params = {
          id: row.id,
        }
        delResources(params).then((data) => {
          this.$message.success('删除成功！')
          this.getData()
        })
      },
      tags() {
        this.dialogFormVisible = true
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          type: 2,
        }
        getLabelBaseLists(params).then((data) => {
          this.labels = data.data
          this.totalOnetag = data.count
        })
      },
      uploadImg(params) {
        console.log(123, params)
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!')
          return
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M')
          return
        }
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.img = res.data.host + '/' + res.data.dir + file.name
            console.log(66, this.img)
          })
        })
      },
      addOnetag() {
        this.dialogOnetag = true
        this.addtype = true
        this.edittype = false
        this.onetag = '添加一级标签'
        this.onetagName = ''
      },
      delOnetag(row) {
        let params = {
          id: row.id,
        }
        delLabelBases(params).then((data) => {
          this.$message.success('删除成功！')
          this.tags()
        })
      },
      addtag() {
        let params = {
          type: 2,
          label_name: this.onetagName,
          url: this.img,
        }
        addLabelBases(params).then((data) => {
          this.$message.success('添加成功！')
          this.dialogOnetag = false
          this.tags()
        })
      },
      editOnetag(row) {
        this.dialogOnetag = true
        this.onetag = '修改标签'
        this.addtype = false
        this.edittype = true
        this.onetagName = this.labels[row.$index].label_name
        this.onetagId = row.row.id
      },
      editTag(row) {
        let params = {
          label_name: this.onetagName,
          id: this.onetagId,
        }
        editBaseLabels(params).then((data) => {
          this.$message.success('修改成功！')
          this.tags()
        })
      },

      tagTwo(row) {
        this.dialogOnetag = false
        this.dialogFormTwo = true
        this.wintit = '二级标签'
        this.onetagId = row.id
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          type: 2,
          label_base_id: row.id,
        }
        getLabelLists(params).then((data) => {
          this.labelsTwo = data.data
          this.totalTwotag = data.count
        })
      },
      twotags() {
        this.dialogTwotag = true
        this.addtype = true
        this.edittype = false
        this.twotag = '添加二级标签'
        this.twotagName = ''
      },
      addTwotag() {
        let params = {
          type: 2,
          label_name: this.twotagName,
          label_base_id: this.onetagId,
        }
        addLabels(params).then((data) => {
          this.$message.success('添加成功！')
          this.dialogTwotag = false
          this.tagTwo(row)
        })
      },
      delTwotag(row) {
        let params = {
          id: row.id,
        }
        delLabels(params).then((data) => {
          this.$message.success('删除成功！')
          this.tagTwo()
        })
      },
      editTwotag(row) {
        this.dialogTwotag = true
        this.twotag = '修改标签'
        this.addtype = false
        this.edittype = true
        this.twotagName = this.labels[row.$index].label_name
        this.onetagId = row.row.id
      },
      saveTwotag(row) {
        this.dialogTwotag = false
        let params = {
          label_name: this.twotagName,
          id: this.onetagId,
        }
        editLabels(params).then((data) => {
          this.$message.success('修改成功！')
          this.edittype = false
          this.tagTwo()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-button {
    font-size: 14px;
  }
  .detail-cont {
    .list {
      margin-bottom: 20px;
      span {
        margin-left: 20px;
      }
    }
  }
</style>
